/**
 * @name SVGS
 * @description svg学习
 */

import React, { Component } from "react";
import { Title } from "@/component";

import styles from "./styles.module.less";

export default class SVGS extends Component {
  render() {
    return (
      <div>
        <h2>svg-可伸缩矢量图形 学习</h2>
        <div className={styles.block}>
          <Title text="圆" />
          <div>
            <div>circlr:圆；cx:左边距；cy:上边距；stroke:边框颜色；stroke-width:边框宽度；fill:内部区域颜色</div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <circle cx="200" cy="50" r="30" stroke="red" stroke-width="1" fill="#ccc" />
            </svg>
          </div>
        </div>
        <div className={styles.block}>
          <Title text="SVG文件实例" />
          <div>
            <div>circlr:圆；cx:左边距；cy:上边距；stroke:边框颜色；stroke-width:边框宽度；fill:内部区域颜色</div>
            <p className={styles.red}>{`<?xml version="1.0" standalone="no"?>
           <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
           "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
           
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
             <circle cx="100" cy="50" r="40" stroke="black"
             stroke-width="2" fill="red" />
           </svg>`}</p>
            <Title text="代码解析" />
            <p className={styles.ccc}>
              第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。 standalone="no" 意味着 SVG
              文档会引用一个外部文件 - 在这里，是 DTD 文件。
            </p>
            <p className={styles.ccc}>
              第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
            </p>
            <p
              className={styles.ccc}
            >{`SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。`}</p>
            <p
              className={styles.ccc}
            >{`SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。`}</p>
            <p className={styles.ccc}>
              troke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。 fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
              关闭标签的作用是关闭 SVG 元素和文档本身。
            </p>
            <p>注释：所有的开启标签必须有关闭标签！</p>
          </div>
        </div>
        <div className={styles.block}>
          <Title text="svg预定义形状元素" />
          <div>
            <div>{`矩形 <rect>
            圆形 <circle>
            椭圆 <ellipse>
            线 <line>
            折线 <polyline>
            多边形 <polygon>
            路径 <path></path>`}</div>
          </div>
        </div>
        <div className={styles.block}>
          <Title text="SVG 矩形 - <rect>" />
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <rect x="100" width="100" rx="10" ry="10" height="100" stroke="red" stroke-width="1" fill="#ccc" opacity="0.3" />
            </svg>
          </div>
        </div>
        <div className={styles.block}>
          <Title text="SVG 椭圆 - <ellipse>" />
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style={{ width: "100%" }}>
              <ellipse cx="100" cy="50" rx="70" ry="40" stroke="red" stroke-width="1" fill="#ccc" />
              <ellipse cx="100" cy="50" rx="60" ry="30" stroke="red" stroke-width="1" fill="#fff" />
              <ellipse cx="260" cy="50" rx="70" ry="30" stroke="#ccc" stroke-width="10" fill="#fff" />
            </svg>
          </div>
          <p>代码解析： CX属性定义的椭圆中心的x坐标 CY属性定义的椭圆中心的y坐标 RX属性定义的水平半径 RY属性定义的垂直半径</p>
        </div>
        <div className={styles.block}>
          <Title text="SVG 直线 - <line>" />
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style={{ width: "100%" }}>
              <line x1="100" y1="0" x2="0" y2="100" stroke="red" stroke-width="1" fill="#ccc" />
            </svg>
          </div>
          <p>x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束</p>
        </div>
        <div className={styles.block}>
          <Title text="SVG 多边形 - <polygon>" />
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style={{ width: "100%" }}>
              <polygon points="50,0 100,50 50,100 0,50" stroke="red" stroke-width="1" fill="#ccc" />
              <polygon points="120,0 150,50 115,60 120,0 100,50 115,60" stroke="red" stroke-width="1" fill="#ccc" />
              <polygon points="150,20 190,20 155,50 170,0 185,50 150,20" stroke="red" stroke-width="1" fill="#ccc" fill-rule="evenodd" />
            </svg>
          </div>
          <p>
            <h3>fill-rule</h3> 属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部”
            （内部区域将被填充）。对一个简单的无交叉的路径，哪块区域是“内部”
            是很直观清楚的。但是，对一个复杂的路径，比如自相交或者一个子路径包围另一个子路径，“内部”的理解就不那么明确了。 fill-rule
            属性提供两种选项用于指定如何判断图形的“内部”:
          </p>
          <p>
            <h3>nonzero</h3>
            字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。下图演示了nonzero规则:
          </p>
          <p>
            <h3>evenodd</h3>
            字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。下图演示了evenodd
            规则:
          </p>
        </div>
        <div className={styles.block}>
          <Title text="SVG 曲线 - <polyline>" />
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style={{ width: "100%" }}>
              <polyline points="20,0 20,20 40,20 40,40 60,40 60,60 80,60 80,80" stroke="red" stroke-width="1" fill="none" />
            </svg>
          </div>
        </div>
        <div className={styles.block}>
          <Title text="SVG 路径 - <path>" />
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style={{ width: "100%" }}>
              <path id="line1" d="M25 20 S40 10 50 20 " stroke="red" stroke-width="1" fill="none" />
              <path id="line2" d="M86 10 S100 0 110 10 " stroke="red" stroke-width="1" fill="none" />
              <path id="line3" d="M70 40 S60 60 70 65 " stroke="red" stroke-width="1" fill="none" />
              <path id="line4" d="M10 70 S70 180 150 0 " stroke="red" stroke-width="1" fill="none" />
              {/**<path id="lineTwo" d="M150 0 L75 200 L225 200 Z" /> */}
            </svg>
          </div>
          <p>
            M = 移动到;&nbsp;&nbsp; L = 线到;&nbsp;&nbsp; H = 水平线到;&nbsp;&nbsp; V = 垂直线到;&nbsp;&nbsp; C = 曲线到;&nbsp;&nbsp; S =
            平滑曲线到;&nbsp;&nbsp; Q = 二次贝塞尔曲线;&nbsp;&nbsp; T = 平滑的二次贝塞尔曲线到;&nbsp;&nbsp; A = 椭圆弧;&nbsp;&nbsp; Z = 闭合
          </p>
          <p>大写表示绝对定位,小写表示相对定位</p>
        </div>
        <div className={styles.block}>
          <Title text="SVG 文本 - <text>" />
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style={{ width: "100%" }}>
              <text x="10" y="50" stroke="red" stroke-width="1" fill="none">
                轻音少女K-ON!
              </text>
              {/**rotate(deg y,x) y+ 上移 x+ 右移*/}
              <text x="100" y="50" stroke="red" stroke-width="1" fill="none" transform="rotate(30 100,60)">
                轻音少女K-ON!
              </text>
            </svg>
          </div>
        </div>
        <div className={styles.block}>
          <Title text="SVG 路径文本 - <textPath>" />
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlnsXlink="http://www.w3.org/1999/xlink" style={{ width: "100%" }}>
              <defs>
                <path id="text01" d="M0 30 A10 10 0 0 0 100 0" />
              </defs>
              <text x="10" y="40" fill="none" stroke="red">
                <textPath xlinkHref="#text01">轻 音 少 女 K - ON !</textPath>
              </text>
              <a xlinkHref="https://www.baidu.com" target="_blank">
                <text x="0" y="20" fill="none" stroke="red">
                  砰！！！
                </text>
              </a>
            </svg>
          </div>
        </div>
      </div>
    );
  }
}
